<template>
        <div>
           <el-form ref="form" :model="form" label-width="80px" :inline="true">
                <el-form-item label="下单时间">
                    <el-date-picker
                        v-model="timeArr"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="timeClick">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-input v-model="form.cNumber"></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                        <el-input v-model="form.cProname"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="form.fddzt" placeholder="请选择订单状态">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="待支付" value="0"></el-option>
                      <el-option label="待出库" value="1"></el-option>
                      <el-option label="配送中" value="2"></el-option>
                      <el-option label="完成" value="4"></el-option>
                      <el-option label="失效" value="5"></el-option>
                      <el-option label="取消" value="6"></el-option>
                      <el-option label="已退款" value="7"></el-option>
                      <el-option label="退货审核" value="10"></el-option>
                      <!-- <el-option label="审核通过" value="11"></el-option>
                      <el-option label="驳回申请" value="12"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryClick">查询</el-button>
                </el-form-item>
            </el-form>
            
                    <el-table
                    :data="tableData"
                    border
                    width='100%'
                    >
                    <el-table-column
                     
                      prop="tdate"
                      label="下单时间"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="cordid"
                      label="下单编号"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="cnumber"
                      label="商品编码"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="cproname"
                      label="商品名称"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="cdanwei"
                      label="单位"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="fsl"
                      label="购买数量"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="fprice"
                      label="购买单价/元"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="fsje"
                      label="订单总额/元"
                      >
                    </el-table-column>
                        <el-table-column
                        prop="cname"
                        label="用户名">
                    </el-table-column>
                    <el-table-column
                        prop="cmtel"
                        label="用户手机号">
                    </el-table-column>
                    <el-table-column
                        prop="ffklx"
                        label="支付方式">
                        <template slot-scope="scope">
                          <div>{{zfType(scope.row.ffklx)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="fddzt"
                        label="订单状态">
                        <template slot-scope="scope">
                          <div>{{orderType(scope.row.fddzt)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                       label="操作"
                       width="250"
                       >
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small" @click="handleSend(scope.row)" v-if="scope.row.fddzt === 1">
                          物流发货
                        </el-button>
                        <el-button type="text" size="small" v-if="scope.row.fddzt === 1" @click="returnGoods(scope.row)">
                         退货
                        </el-button>
                        <el-button type="text" size="small" v-if="scope.row.orderAfterApply && scope.row.orderAfterApply.length != 0" @click="reasonClick(scope.row)">
                          退货驳回原因
                         </el-button>
                          <!-- <el-button type="text" size="small" v-for="(item,index) in scope.row.orderAfterApply" @click="reasonClick(scope.row)">
                          退货驳回原因
                         </el-button> -->
                      </template>
                    </el-table-column>
                    
                  </el-table>
                  <div>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :current-page="page.current" 
                    :page-sizes="[5,10,20,30,40]" 
                    :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                    </el-pagination>
                  </div>
                  <el-dialog title="物流发货" :visible.sync="dialogFormVisible">
                      <el-form :model="sendparms" :rules="rules" ref="sendparms" :label-width="formLabelWidth">
                        <el-form-item label="物流公司"  prop="logisticsCompanyName" >
                          <el-input v-model="sendparms.logisticsCompanyName" autocomplete="off"  style="width:300px;" placeholder="请输入物流公司"></el-input>
                        </el-form-item>
                        <el-form-item label="物流编号" prop="logisticsNumber">
                              <el-input v-model="sendparms.logisticsNumber" autocomplete="off" style="width:300px;" type="number" placeholder="请输入物流编号"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('sendparms')">确 定</el-button>
                      </div>
                  </el-dialog>
                  <el-dialog
                    title="退货原因"
                    :visible.sync="goodsvisible"
                    width="30%"
                   >
                   <el-input type="textarea" v-model="remark" placeholder="请输入退货原因"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="goodsvisible = false">取 消</el-button>
                      <el-button type="primary" @click="goodsClick">确 定</el-button>
                    </span>
                  </el-dialog>
                  <el-dialog
                  title="退货原因"
                  :visible.sync="reasonvisible"
                  width="30%"
                 >
                <div v-for="item in resonaData" :key="item.index">
                 <div v-if="item.auditRemark != ''">{{item.auditRemark}}</div>
                 <div v-else>暂无退货原因</div>
                 <div class="line">{{item.createTime}}</div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="reasonvisible = false">取 消</el-button>
                    <el-button type="primary" @click="reasonvisible = false">确 定</el-button>
                  </span>
                </el-dialog>
        </div>
    </template>
    <script>
            export default {
              data() {
                return {
                  form: {
                    userId:JSON.parse(localStorage.getItem("userInfo")).userId,
                    cNumber: '',
                    cProname: '',
                    fddzt:'',
                    endTime:'',
                    startTime:'',
                    currentPage:1,
                    pageSize:10
                  },
                  sendparms:{
                    logisticsCompanyName:'',
                    logisticsNumber:'',
                    orderId:'',
                    userId:''
                  },
                  rules: {
                    logisticsCompanyName: [
                      { required: true, message: '请输入物流公司', trigger: 'blur' },
                    ],
                    logisticsNumber: [
                      { required: true, message: '请输入正确的物流编号', trigger: 'blur'},
                    ],
                  },
                  timeArr:'',
                  page:{
                    current:1,
                    pageSize:10,
                    total:null
                  },
                  tableData: [],
                  formLabelWidth: '120px',
                  dialogFormVisible: false,
                  goodsvisible:false,
                  remark:'',
                  orderId:'',
                  resonaData:[],
                  reasonvisible:false,
                  ordercontent:{}
                }
              },
              methods: {
                zfType(n){
                  let zf = ''
                  switch (n){
                    case 1:
                    zf = '支付宝';
                    break;
                    case 2:
                    zf = '微信';
                    break;
                    case 3:
                    zf = '余额支付';
                    break;
                    default:
                  }
                  return zf
                },
                queryClick(){
                  this.initDate();
                },
                orderType(n){
                  // console.log('n',n)
                  let type = '';
                  switch (n){
                    case 0:
                    type = '待支付';
                    break;
                    case 1:
                    type = '待出库';
                    break;
                    case 2:
                    type = '配送中';
                    break;
                    case 4:
                    type = '完成';
                    break;
                    case 5:
                    type = '失效';
                    break;
                    case 6:
                    type = '取消';
                    break;
                    case 7:
                    type = '已退款';
                    break;
                    case 10:
                    type = '退货审核';
                    break;
                    case 11:
                    type = '审核通过';
                    break;
                    case 12:
                    type = '驳回申请';
                    break;
                    default:
                   
                  }
                  return type;

                },
                async initDate(){
                  let { data } = await this.$post({
                      api: '/order/listOrder',
                      data:this.form
            
                    });
                    if (data.code === 0) {
                      this.tableData = data.data.list;
                      
                      this.page.total = data.data.total;
                      this.page.pageSize = data.data.pageSize;
                    } else {
                      this.$message({
                        type: 'error',
                        message: data.msg
                      })
                  }
                },
                async confirmReceipt(){
                  let { data } = await this.$post({
                      api: '/order/confirmReceipt',
                      data:this.sendparms
            
                    });
                    if (data.code === 0) {
                      this.$message({
                        type: 'success',
                        message: '发货成功'
                      })
                      this.dialogFormVisible = false;
                      this.initDate();
                      console.log(data)
                    } else {
                      this.$message({
                        type: 'error',
                        message: data.msg
                      })
                  }
                },
                //退货申请
                async quitReceipt(){
                  let { data } = await this.$post({
                      api: '/order/quitReceipt',
                      data:{
                        orderId:this.orderId,
                        userId:this.form.userId,
                        remark:this.remark
                      }
            
                    });
                    if (data.code === 0) {
                      this.$message({
                        type: 'success',
                        message: '退货成功'
                      })
                      this.dialogFormVisible = false;
                      this.initDate();
                      console.log(data)
                    } else {
                      this.$message({
                        type: 'error',
                        message: data.msg
                      })
                  }
                },
                timeClick(arr){
             
                  if(arr == null){
                    this.form.startTime = '';
                    this.form.endTime = ''
                  }else{
                    this.form.startTime = arr[0];
                    this.form.endTime = arr[1];
                  }
                    console.log(arr)
                },
                onSubmit() {
                  console.log('submit!');
                },
                handleClick(row) {
                    // this.$router.push('/orderdetails?'+row.cordid)
                    this.$router.push({path:'/orderdetails',query:{cordid:row.id}})
                    console.log(row);
                },
                handleSizeChange(val) {
                    this.form.pageSize = val;
                    this.initDate();
                    // console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                  this.form.currentPage = val;
                  this.initDate();
                  // console.log(`当前页: ${val}`);
                },
                handleSend(row){
                  this.sendparms.orderId = row.id;
                  this.sendparms.userId = row.fuid;
                  console.log(row)
                  this.dialogFormVisible = true;
                  this.sendparms.logisticsCompanyName = '';
                  this.sendparms.logisticsNumber = '';
                    // this.confirmReceipt();
                },
                submitForm(formName){
                  console.log(formName)
                  this.$refs[formName].validate((valid) => {
                      if (valid) {
                       this.confirmReceipt();
                      } else {
                        // console.log('error submit!!');
                        return false;
                      }
                    });
                  },
                  returnGoods(row){
                    this.orderId = row.id;
                    console.log(row);
                    this.remark = '';
                    this.goodsvisible = true;
                  },
                  goodsClick(){
                    console.log(123)
                    if(this.remark == ''){
                      this.$message({
                        type: 'error',
                        message: '请输入退货原因'
                      })
                    }else{
                      this.quitReceipt();
                      this.goodsvisible = false;
                    }
                    
                  },
                  //退货驳回原因
                  reasonClick(row){
                    this.reasonvisible = true;
                    this.resonaData = row.orderAfterApply;
                  }
              },
              mounted () {
                this.initDate();
              }
            }
          </script>
          <style>
            .line{
              border-bottom:1px solid #ccc;
              margin-bottom:20px;
            }
          </style>